<!DOCTYPE html>
<html lang="zh-CN">
	<!--算机220317李祎炜-->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <!-- 引入 Vue 3 CDN -->
  <script src="https://unpkg.com/vue@3"></script>
  <!-- 引入 ECharts CDN -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      margin: 0;
      padding: 0;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
      color: #333;
      min-height: 100vh;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
    }
    
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding: 15px 20px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }
    
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .logo-icon {
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 20px;
    }
    
    .logo-text {
      font-size: 24px;
      font-weight: 700;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .date-display {
      background: #f8f9fc;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      color: #5a6a85;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }
    
    .stat-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
      margin-bottom: 25px;
    }
    
    .stat-item {
      background: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .stat-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }
    
    .stat-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
    }
    
    .stat-item:nth-child(1)::before { background: linear-gradient(to bottom, #ff9a9e, #fad0c4); }
    .stat-item:nth-child(2)::before { background: linear-gradient(to bottom, #a1c4fd, #c2e9fb); }
    .stat-item:nth-child(3)::before { background: linear-gradient(to bottom, #ffecd2, #fcb69f); }
    .stat-item:nth-child(4)::before { background: linear-gradient(to bottom, #84fab0, #8fd3f4); }
    .stat-item:nth-child(5)::before { background: linear-gradient(to bottom, #d4fc79, #96e6a1); }
    .stat-item:nth-child(6)::before { background: linear-gradient(to bottom, #a6c0fe, #f68084); }
    
    .stat-item div {
      font-size: 16px;
      color: #5a6a85;
      margin-bottom: 10px;
    }
    
    .stat-item span {
      display: block;
      font-size: 28px;
      font-weight: 700;
      color: #2c3e50;
    }
    
    .trend {
      display: flex;
      align-items: center;
      font-size: 13px;
      margin-top: 8px;
      color: #5a6a85;
    }
    
    .trend.up {
      color: #0acf97;
    }
    
    .trend.down {
      color: #fa5c7c;
    }
    
    .trend-icon {
      margin-right: 5px;
      font-size: 16px;
    }
    
    .chart-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 25px;
      margin-bottom: 25px;
    }
    
    .card {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      padding: 20px;
      transition: all 0.3s ease;
    }
    
    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }
    
    .card h3 {
      margin-bottom: 15px;
      color: #2c3e50;
      font-size: 18px;
      display: flex;
      align-items: center;
    }
    
    .card h3 i {
      margin-right: 8px;
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .chart-box {
      height: 300px;
      width: 100%;
    }
    
    .footer-card {
      grid-column: 1 / -1;
    }
    
    .controls {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .time-filter {
      background: #f8f9fc;
      border: none;
      padding: 8px 15px;
      border-radius: 8px;
      font-size: 14px;
      color: #5a6a85;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .time-filter:hover {
      background: #eef2f7;
    }
    
    .time-filter.active {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      color: white;
    }
    
    @media (max-width: 768px) {
      .chart-row {
        grid-template-columns: 1fr;
      }
      
      .stat-row {
        grid-template-columns: repeat(2, 1fr);
      }
      
      header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
      }
    }
    
    @media (max-width: 480px) {
      .stat-row {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    
    
    <!-- 顶部统计卡片 -->
    <div class="stat-row">
      <div class="stat-item">
        <div>用户总数</div>
        <span>12,483</span>
        <div class="trend up"><span class="trend-icon">↑</span> 较上月增长 8.2%</div>
      </div>
      <div class="stat-item">
        <div>访问量</div>
        <span>348,920</span>
        <div class="trend up"><span class="trend-icon">↑</span> 较上周增长 15.3%</div>
      </div>
      <div class="stat-item">
        <div>订单数</div>
        <span>4,832</span>
        <div class="trend down"><span class="trend-icon">↓</span> 较上周下降 2.1%</div>
      </div>
      <div class="stat-item">
        <div>总收益</div>
        <span>¥1,248,300</span>
        <div class="trend up"><span class="trend-icon">↑</span> 较上月增长 12.7%</div>
      </div>
      <div class="stat-item">
        <div>分享数</div>
        <span>23,748</span>
        <div class="trend up"><span class="trend-icon">↑</span> 较上周增长 5.4%</div>
      </div>
      <div class="stat-item">
        <div>转化率</div>
        <span>34.8%</span>
        <div class="trend up"><span class="trend-icon">↑</span> 较上周增长 3.2%</div>
      </div>
    </div>

    <!-- 中间图表行 -->
    <div class="chart-row">
      <!-- 饼图：用户访问来源 -->
      <div class="card">
        <h3><i>●</i> 用户访问来源</h3>
        <div class="chart-box" id="pieChart"></div>
      </div>
      
      <!-- 柱状图：体检项统计 -->
      <div class="card">
        <h3><i>●</i> 体检项统计</h3>
        <div class="chart-box" id="barChart"></div>
      </div>
      
      <!-- 雷达图：体检维度 -->
      <div class="card">
        <h3><i>●</i> 健康评估维度</h3>
        <div class="chart-box" id="radarChart"></div>
      </div>
    </div>

    <!-- 底部面积图：各店全年销售额 -->
    <div class="card footer-card">
      <div class="controls">
        <button class="time-filter active">全年</button>
        <button class="time-filter">季度</button>
        <button class="time-filter">月度</button>
      </div>
      <h3><i>●</i> 各店全年销售额趋势</h3>
      <div class="chart-box" id="areaChart"></div>
    </div>
  </div>

  <script>
    // Vue 3 实例
    const { createApp } = Vue;
    createApp({
      mounted() {
        this.initPieChart();
        this.initBarChart();
        this.initRadarChart();
        this.initAreaChart();
        
        // 添加时间筛选按钮事件
        document.querySelectorAll('.time-filter').forEach(button => {
          button.addEventListener('click', function() {
            document.querySelectorAll('.time-filter').forEach(btn => {
              btn.classList.remove('active');
            });
            this.classList.add('active');
          });
        });
      },
      methods: {
        // 初始化饼图（用户访问来源）
        initPieChart() {
          const pieDom = document.getElementById("pieChart");
          const pieChart = echarts.init(pieDom);
          const option = {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              right: 10,
              top: 'center',
              data: ['视频广告', '搜索引擎', '直接访问', '联盟推广', '口碑推荐']
            },
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: true,
                  formatter: '{b}: {d}%'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '16',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: true
                },
                data: [
                  { value: 100, name: '视频广告' },
                  { value: 80, name: '搜索引擎' },
                  { value: 120, name: '直接访问' },
                  { value: 50, name: '联盟推广' },
                  { value: 70, name: '口碑推荐' }
                ]
              }
            ],
            color: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFBE0B', '#FB5607']
          };
          pieChart.setOption(option);
          
          // 响应窗口变化
          window.addEventListener('resize', function() {
            pieChart.resize();
          });
        },
        
        // 初始化柱状图（体检项统计）
        initBarChart() {
          const barDom = document.getElementById('barChart');
          const barChart = echarts.init(barDom);
          const option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['20-30岁', '31-40岁', '41-50岁', '51-60岁', '61-70岁'],
              bottom: 0
            },
            grid: {
              left: '1%',
              right: '1%',
              bottom: '15%',
              top: '5%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: ['第一季度', '第二季度', '第三季度', '第四季度']
            },
            yAxis: {
              type: 'value',
              name: '人数'
            },
            series: [
              { name: '20-30岁', type: 'bar', data: [30, 40, 50, 35], barWidth: 15 },
              { name: '31-40岁', type: 'bar', data: [25, 35, 45, 30], barWidth: 15 },
              { name: '41-50岁', type: 'bar', data: [40, 50, 60, 45], barWidth: 15 },
              { name: '51-60岁', type: 'bar', data: [20, 30, 40, 25], barWidth: 15 },
              { name: '61-70岁', type: 'bar', data: [15, 25, 35, 20], barWidth: 15 }
            ],
            color: ['#6A11CB', '#2575FC', '#0ACF97', '#FFBE0B', '#FB5607']
          };
          barChart.setOption(option);
          
          // 响应窗口变化
          window.addEventListener('resize', function() {
            barChart.resize();
          });
        },
        
        // 初始化雷达图（体检维度）
        initRadarChart() {
          const radarDom = document.getElementById('radarChart');
          const radarChart = echarts.init(radarDom);
          const option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              data: ['当前用户', '平均数据'],
              bottom: 10
            },
            radar: {
              indicator: [
                { name: '心血管健康', max: 100 },
                { name: '代谢功能', max: 100 },
                { name: '骨骼健康', max: 100 },
                { name: '免疫力', max: 100 },
                { name: '神经系统', max: 100 }
              ],
              radius: '65%',
              splitArea: {
                areaStyle: {
                  color: ['rgba(106, 17, 203, 0.1)', 'rgba(106, 17, 203, 0.05)']
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(106, 17, 203, 0.3)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(106, 17, 203, 0.2)'
                }
              }
            },
            series: [
              {
                type: 'radar',
                emphasis: {
                  lineStyle: {
                    width: 4
                  }
                },
                data: [
                  {
                    value: [82, 73, 65, 89, 58],
                    name: '当前用户',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 2
                    },
                    areaStyle: {
                      opacity: 0.4
                    }
                  },
                  {
                    value: [68, 72, 75, 65, 70],
                    name: '平均数据',
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                      width: 2,
                      type: 'dashed'
                    }
                  }
                ]
              }
            ],
            color: ['#6A11CB', '#0ACF97']
          };
          radarChart.setOption(option);
          
          // 响应窗口变化
          window.addEventListener('resize', function() {
            radarChart.resize();
          });
        },
        
        // 初始化面积图（各店全年销售额）
        initAreaChart() {
          const areaDom = document.getElementById('areaChart');
          const areaChart = echarts.init(areaDom);
          const option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                lineStyle: {
                  opacity: 0.2
                }
              }
            },
            legend: {
              data: ['旗舰店', '中心店', '社区店', '线上商城', '合作网点'],
              bottom: 10
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '15%',
              top: '5%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
              type: 'value',
              name: '销售额（万元）'
            },
            series: [
              { name: '旗舰店', type: 'line', data: [120, 132, 101, 134, 90, 230, 210, 234, 190, 230, 220, 230], 
                smooth: true, areaStyle: { opacity: 0.4 }, symbol: 'circle', symbolSize: 8 },
              { name: '中心店', type: 'line', data: [220, 182, 191, 234, 290, 330, 310, 324, 390, 330, 310, 320], 
                smooth: true, areaStyle: { opacity: 0.4 }, symbol: 'circle', symbolSize: 8 },
              { name: '社区店', type: 'line', data: [150, 232, 201, 154, 190, 330, 410, 424, 290, 330, 320, 330], 
                smooth: true, areaStyle: { opacity: 0.4 }, symbol: 'circle', symbolSize: 8 },
              { name: '线上商城', type: 'line', data: [320, 332, 301, 334, 390, 330, 320, 324, 390, 330, 310, 320], 
                smooth: true, areaStyle: { opacity: 0.4 }, symbol: 'circle', symbolSize: 8 },
              { name: '合作网点', type: 'line', data: [82, 93, 90, 93, 129, 133, 132, 132, 139, 133, 132, 133], 
                smooth: true, areaStyle: { opacity: 0.4 }, symbol: 'circle', symbolSize: 8 }
            ],
            color: ['#6A11CB', '#2575FC', '#0ACF97', '#FFBE0B', '#FB5607']
          };
          areaChart.setOption(option);
          
          // 响应窗口变化
          window.addEventListener('resize', function() {
            areaChart.resize();
          });
        }
      }
    }).mount('#app');
  </script>
</body>
</html>